<template>
    <div class="login">
        <el-card>
            <h5 style="text-align: center">服务管理工具</h5>
            <el-form style="width: 400px;" label-width="80px">
                <el-form-item label="账号">
                    <el-input v-model="username"/>
                </el-form-item>
                <el-form-item label="密码">
                    <el-input type="password" v-model="password" @keydown.enter.native="login"/>
                </el-form-item>
                <div style="text-align: center; margin-top: 10px;">
                    <el-button @click="login" type="primary" >登录</el-button>
                </div>
            </el-form>
        </el-card>
    </div>
</template>

<script>
    import {origin} from "../libs/util";

    export default {
        name: "login",
        data(){
            return {
                username: "",
                password: ""
            }
        },
        methods:{
            login(){
                fetch(`http://${origin}/login?username=${this.username}&password=${this.password}`)
                .then(r => r.text())
                .then(r => {
                    if(r === "failed"){
                        return
                    }
                    sessionStorage.setItem("token", r)
                    this.$router.push("/home")
                })
            },
        },
        mounted() {
            if(sessionStorage.getItem("token")){
                this.$router.push("/home")
            }
        }
    }
</script>

<style scoped>

    @-webkit-keyframes Gradient {
        0% {
            background-position: 0% 50%
        }
        50% {
            background-position: 100% 50%
        }
        100% {
            background-position: 0% 50%
        }
    }

    @-moz-keyframes Gradient {
        0% {
            background-position: 0% 50%
        }
        50% {
            background-position: 100% 50%
        }
        100% {
            background-position: 0% 50%
        }
    }

    @keyframes Gradient {
        0% {
            background-position: 0% 50%
        }
        50% {
            background-position: 100% 50%
        }
        100% {
            background-position: 0% 50%
        }
    }

    h1, h6 {
        font-family: 'Open Sans';
        font-weight: 300;
        text-align: center;
        position: absolute;
        top: 45%;
        right: 0;
        left: 0;
    }

    .login{
    color: #fff;
    background: linear-gradient(-45deg, #EE7752, #E73C7E, #23A6D5, #23D5AB);
    background-size: 400% 400%;
    -webkit-animation: Gradient 15s ease infinite;
    -moz-animation: Gradient 15s ease infinite;
    animation: Gradient 15s ease infinite;
        display: flex;
        width: 100vw;
        height: 100vh;
        box-sizing: border-box;
        justify-content: center;
        align-items: center;
        overflow: hidden;
    }
</style>
